<template>
  <!-- 艺术家 -->
  <div
    class="artist-list"
    v-title
    :data-title="$t('router.artistClassicalTitle')"
  >
    <v-nav></v-nav>
    <v-filter @chooseType="chooseType" :diff="filter"></v-filter>
    <ul class="list" v-loading="fullscreenLoading">
      <li
        v-for="item of list"
        :key="item.personId"
        @click="goto(item)"
        v-text="
          $i18n.locale === 'zh'
            ? item.fullCname || item.fullName
            : item.fullName
        "
      ></li>
    </ul>
    <nice-empty
      v-show="list.length == 0 && fullscreenLoading == false"
      :emptyText="$t('public.noData')"
    ></nice-empty>
  </div>
</template>

<script>
import vNav from "@/components/common/header/Nav";
import vFilter from "@/components/common/filter/Index";
export default {
  data() {
    return {
      filter: ["sort", "en"],
      //专辑列表
      list: [],
      // 是否显示加载动画
      loading: false,
      // 是否还有数据
      loadStatus: true,
      fullscreenLoading: true,
      // 请求参数
      params: {
        // 人物首字母
        fullNameAlpha: "A", // del
        // 人物类型ID
        personType: 1,
      },
    };
  },
  components: {
    vNav,
    vFilter,
  },
  computed: {
    isMobile() {
      return this.$store.getters.isMobile;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.getPersonList();
  },
  methods: {
    chooseType(type) {
      if ("en" in type) {
        this.params.fullNameAlpha = type.en;
      }
      if ("sort" in type) {
        this.params.personType = type.sort;
      }
      this.loadStatus = true;
      this.list = [];
      this.getPersonList();
    },
    //获取列表
    async getPersonList() {
      this.fullscreenLoading = true;
      try {
        this.loadStatus = false;
        let res = await this.$api.classical.getPersonList(this.params);
        if (res.code === 1000000) {
          this.list = res.source ? res.source : [];
          this.fullscreenLoading = false;
        }
      } catch (e) {
        console.log(e);
      }
    },
    goto(val) {
      this.$router.push({
        name: this.isMobile
          ? "classicalMArtistDetail"
          : "classicalArtistDetail",
        params: {
          personId: val.personId,
          personTypeId: val.personTypeId,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
